<template>
  <div>
    <Card shadow>
      <tree-table expand-key="name" :expand-type="false" :selectable="false" :columns="columns" :data="data1">
        <template slot="action" slot-scope="scope">
          <Button icon="md-build" type="success" @click="edit(scope)">编辑</Button>
          <Button @click="deleteConfirm(scope)" type="warning">删除</Button>
        </template>
      </tree-table>
    </Card>
    <Modal
      v-model="modal1"
      title="编辑">
      <Form :model="formItem" :label-width="80">
        <FormItem label="部门编号">
          <Input v-model="formItem.corganCode" readonly></Input>
        </FormItem>
        <FormItem label="部门名称">
          <Input v-model="formItem.corganName" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="负责人账号">
          <Input v-model="formItem.mainPerson" placeholder="Enter something..."></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="submit" type="primary">更新</Button>
        <Button @click="resetForm" type="primary">取消</Button>
      </div>
    </Modal>
    <Modal
      v-model="modal2"
      title="确认删除">
      <p>确定要删除该部门的信息吗(会删除全部子部门的信息)？</p>
      <div slot="footer">
        <Button @click="deleteDepartment" type="primary">确认</Button>
        <Button @click="cancel2" type="primary">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {getTreeTableData} from "@/api/data";
import EditDialog from "./edit-dialog/edit-dialog"
import {deleteCarById, deleteDepartmentById, getOrganizationStructure, updateDepartment} from "../../../../../api/data";

export default {
  components: {
    EditDialog
  },
  name: 'tree_table_page',
  data() {
    return {
      modal1: false,
      modal2: false,
      formItem: {
        corganCode: '',
        corganName: '',
        mainPerson: ''
      },
      columns: [
        {
        title: '编号',
        key: 'id',
        width: '100px'
        },
        {
          title: '机构组织层级',
          key: 'name',
          width: '200px'
        },
        {
          title: '主负责人',
          key: 'mainHead',
          minWidth: '100px'
        },
        {
          title: '账号',
          key: 'account',
          minWidth: '100px'
        },
        {
          title: '电话',
          key: 'phone',
          minWidth: '100px'
        },
        {
          title: '人数',
          key: 'personNumber',
          minWidth: '100px'
        },
        {
          title: '备注',
          key: 'note',
          minWidth: '150px'
        },
        {
          title: '操作',
          key: 'action',
          minWidth: '200px',
          type: 'template',
          template: 'action'
        }],
      data1: [],
      name: '',
      state: '',
      value: '',
      departmentQuery: {
        name: '',
        status: '1',
        limit: '10',
        page: '1'
      },
      selectedId: ''
      }
  },
  methods: {
    handle(scope) {
      // console.log()
      console.log(scope)
    },
    getTableData(departmentQuery) {
      getOrganizationStructure(departmentQuery).then(res => {
        this.data1 = res.data.obj
        console.log(res.data.obj)
      })
    },
    edit(scope){
        this.formItem.corganCode=scope.row.id;
        this.formItem.corganName=scope.row.name;
        this.formItem.mainPerson=scope.row.account;
        this.modal1=true;
    },
    submit(){
      updateDepartment(this.formItem).then(res=>{
        if (res.data.code==500){
          this.$Message.info(res.data.message);
        }else{
          this.$Message.info("修改成功");
          this.modal1=false;
          this.getTableData(this.departmentQuery)
        }
      }).catch(err=>{
      })

    },
    resetForm(){
      this.modal1=false;
    },
    deleteDepartment(){
      deleteDepartmentById(this.selectedId).then(res=>{
        if (res.data.code==200){
          this.$Message.info("删除成功");
          this.modal1=false;
          this.getTableData(this.departmentQuery)
          this.modal2=false;
        }else{
          this.$Message.info("请先处理该部门下的员工");
        }
      }).catch(err=>{
        this.$Message.info("请先处理该部门下的员工");
      })
    },
    deleteConfirm(scope){
      this.selectedId=scope.row.id;
      this.modal2=true;
    },
    cancel2(){
      this.modal2=false;
    },
  },
  // mounted() {
  //   this.getTableData(name, state)
  // },

}
</script>

<style>
Button {
  margin: 5px;
}
</style>
